<template>
	<view class="monitor_body">
		<!-- 视频流播放 -->
		<view class="monitor_vedio">
			<!-- style="border: 1px solid red;width: 100%;height: 100%;" -->
			<video  :src="'http://101.206.123.213:7086/live/cameraid/'+playVedio.activeId+'%240/substream/1.m3u8'"
				controls v-if="isPlay" style="width: 100%;height: 55vh;"></video>
			<span class="iconfont monitor_vedio_icon" @click="playCurrentVedio()" v-else>&#xe643;</span>
		</view>
		<!-- 视频信息 -->
		<view class="monitor_vedio_info" style="padding-left: 20px;padding-right: 20px;line-height: 50px;">
			<view style="font-weight: bold;position: relative;">
				<span class="iconfont .monitor_vedio_info_icon">&#xe760;</span>
				<text style='margin-left: 30px;'>{{playVedio.name}}</text>
			</view>
			<view class="monitor_vedio_info_type">
				<text
					style="border: 2px solid #999999;width: 16px;height:12px;border-radius: 3px;padding: 2px;margin-right: 10px;">HD</text>
				480P
			</view>
		</view>
		<!-- 所有点位 -->
		<view style="padding-left: 20px;">
			<view class="monitor_dotList_title">全部点位</view>
			<!-- 点位列表 -->
			<view class="monitor_dotList">
				<!-- 点位 -->
				<view
					:class="playVedio.activeId==item.supervisoryId?'monitor_dot  monitor_dot_info_active':'monitor_dot monitor_dot_info'"
					v-for="(item,index) in vedioList" :key="index" @click="checked(item)">
					<view class="monitor_vedio_info">
						<view>点位名:</view>
						<view style="font-weight: bold;">{{item.supervisoryPt}}</view>
					</view>
					<view class="monitor_vedio_info_id">{{item.supervisoryId}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listMonitorList
	} from '@/common/js/api/monitor.js';
	export default {
		data() {
			return {
				playVedio: {
					activeId: '',
					name: ''
				},
				vedioList: [{
					supervisoryPt: "九号楼大厅西边",
					supervisoryId: "No.7E05BD8PAG260C5",
				}, {
					supervisoryPt: "九号楼大厅东边",
					supervisoryId: "No.6E20284P2G86VC2",
				}],
				isPlay: false
			}
		},
		methods: {
			//确认播放点位
			checked(data) {
				this.playVedio.activeId = data.supervisoryId
				this.playVedio.name = data.supervisoryPt
			},
			//播放点位
			playCurrentVedio() {
				this.isPlay = true
				console.log('http://101.206.123.213:7086/live/cameraid/'+this.playVedio.activeId+'%240/substream/1.m3u8')
			},
			getMonitorList(){
				listMonitorList().then(res => {
					if(res.code==200){
						let data = res.rows
						this.vedioList = data
					}
				})
			}
		},
		onLoad(){
			this.getMonitorList()
		}
	}
</script>

<style>
	@import url("/static/font/iconfont.css");
</style>
<style lang="scss" scoped>
	.monitor_body {
		height: 100vh;
		background-color: white;

		.monitor_vedio {
			height: 55%;
			background-color: black;
			display: table;
			width: 100%;

			.monitor_vedio_icon {
				color: #fff;
				font-size: 60px;
				display: table-cell;
				vertical-align: middle;
				text-align: center;
			}
		}

		.monitor_vedio_info {
			display: flex;
			justify-content: space-between;
			font-size: 14px;

			.monitor_vedio_info_type {
				font-size: 12px;
				color: #999;
				font-weight: bold;
			}

			.monitor_vedio_info_icon {
				color: #1884eb;
				position: absolute;
				font-size: 20px;
				font-weight: normal;
			}

		}

		.monitor_dotList_title {
			margin-top: 20px;
			margin-bottom: 20px;
			font-size: 14px;
			font-weight: bold;
		}

		.monitor_dotList {
			height: 90px;
			overflow-x: scroll;
			white-space: nowrap;
		}

		.monitor_dot {
			display: inline-block;
			width: 163px;
			height: 65px;
			background-color: #f5f5f5;
			border-radius: 5px;
			font-size: 14px;
			padding: 10px;
			position: relative;
			color: #999;
		}

		.monitor_dot_info {
			margin-right: 20px;
		}

		.monitor_vedio_info_id {
			position: absolute;
			bottom: 10px;
			font-size: 10px;
			right: 15px;
		}

		.monitor_dot_info_active {
			margin-right: 20px;
			background-color: #1884eb;
			color: white;
		}
	}
</style>
